<template>
  <div v-show="loading" class="spin">
    <div class="spin-dot"><i /><i /><i /><i /></div>
  </div>
</template>
<script>
export default {
  props: {
    // 是否显示进度条
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped>
.spin {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 20001;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
}
.spin:after {
  content: "";
  height: 100%;
  width: 0;
}
.spin .spin-dot {
  width: 32px;
  height: 32px;
  animation: antRotate 1.2s infinite linear;
}
.spin .spin-dot,
.spin:after {
  display: inline-block;
  vertical-align: middle;
}

.spin .spin-dot > i {
  width: 9px;
  height: 9px;
  float: left;
  margin: 3px;
  border-radius: 50%;
  background: #fff;
}
.spin .spin-dot > i:first-child {
  opacity: 0.25;
}
.spin .spin-dot > i:nth-child(2) {
  opacity: 0.5;
}
.spin .spin-dot > i:nth-child(3) {
  opacity: 0.75;
}
.spin .spin-dot > i:nth-child(4) {
  opacity: 1;
}
</style>
